<template>
    <div class="createPost-container">
        <el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
            <div class="createPost-main-container" style="margin-top: 20px;">

                <el-form-item label="任务名称" prop="filename" label-width="90px" class="postInfo-container-item">
                    <el-input v-model="postForm.filename" style="width: 300px;"></el-input>
                </el-form-item>

                <el-form-item label-width="90px" prop="importance" label="重要性" class="postInfo-container-item">
                    <el-rate
                            v-model="postForm.importance"
                            :max="3"
                            :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                            :low-threshold="1"
                            :high-threshold="3"
                            style="display:inline-block"
                    />
                </el-form-item>

                <el-form-item label-width="90px" label="指派" class="postInfo-container-item">
                    <el-select v-model="postForm.user_id"
                               :remote-method="getRemoteUserList"
                               @change="change"
                               filterable default-first-option remote placeholder="Search user">
                        <el-option v-for="(item,index) in userListOptions" :key="item.admin_id" :label="item.username" :value="item.admin_id" />
                    </el-select>
                </el-form-item>

                <el-form-item label-width="90px" label="文件" prop="attach_id" class="postInfo-container-item">
                    {{postForm.attach.origin_name}}
                </el-form-item>

                <el-form-item label-width="90px">
                    <el-button type="success" :disabled="loading" @click="submitForm">编辑</el-button>
                </el-form-item>

            </div>
        </el-form>
    </div>
</template>

<script>

    export default {
        name: 'taskUpdate',
        data() {
            return {
                postForm: null,
                loading: false,
                userListOptions: [],
                rules: {
                    filename: [
                        { required: true, message: '请输入任务名称', trigger: 'blur' }
                    ],
                    importance: [
                        { required: true, message: '请选择重要性', trigger: 'change' }
                    ],
                },
            }
        },
        created() {
            const id = this.$route.params && this.$route.params.id
            this.fetchData(id)
        },
        methods: {
            fetchData(id) {
                this.$adminApi.task_detail({id:id}).then(response => {
                    this.postForm = response.data
                    this.getRemoteUserList(this.postForm.username)
                }).catch(err => {
                    console.log(err)
                })
            },
            submitForm() {
                this.$refs.postForm.validate(valid => {
                    if (valid) {
                        this.loading = true
                        this.$adminApi.task_edit(this.postForm).then(response => {
                            this.$notify({
                                title: '成功',
                                message: '编辑任务成功',
                                type: 'success',
                                duration: 2000
                            })
                            if (!response.code) {
                                this.$router.push({
                                    name: 'taskTable',
                                    params: {  }
                                })
                            }
                            this.loading = false
                        }).catch((e)=>{
                            this.loading = false
                        })
                    }
                })
            },

            getRemoteUserList(query) {
                if (query.length > 2) {
                    this.$adminApi.admin_getList({search:{keywords:query, user_type:2}}).then(response => {
                        if (!response.data.rows) return
                        this.userListOptions = response.data.rows
                    })
                }
            },
            change(val) {
                this.userListOptions.forEach(item => {
                    if (item.admin_id == val) {
                        this.postForm.user_id = item.admin_id;
                        this.postForm.username = item.username;
                    }
                });
            }
        }
    }
</script>
